<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{padding: 10px;margin: 10px;border:4px solid black;}
    </style>
</head>
<body>
    <div id="app">
        <h1>我是：{{title}}，我有：{{msg}}</h1>
        <kx></kx>
    </div>
</body>
<script src="../libs/vue.js"></script>

<template id="kangxi">
    <div>
        <h2>我是：{{title}}，我有：{{msg}}</h2>
        <p>获取到了儿子的：{{'未知'}}</p>
        <yz :abc="msg" :qwe="123"></yz>
        <yx></yx>
    </div>
</template>

<template id="yongzheng">
    <div>
        <h3>我是：{{title}}，我有：{{msg}}</h3>
        <p>获取到了父级的：{{ abc }} - {{qwe}}</p>
        <ql></ql>
    </div>
</template>
<template id="yinxiang">
    <div>
        <h3>我是：{{title}}，我有：{{msg}}</h3>
    </div>
</template>

<template id="qianlong">
    <div>
        <h4>我是：{{title}}，我有：{{msg}}</h4>
        <p>获取到了父级的：{{'未知'}}</p>
    </div>
</template>

<script>
    const ql = {
        template: "#qianlong",
        data(){
            return {
                title: "乾隆",
                msg: "随手涂鸦"
            }
        }
    }

    const yx = {
        template: "#yinxiang",
        data(){
            return {
                title: "胤翔",
                msg: "西湖边一栋庭院"
            }
        }
    }
    const yz = {
        props:{
            abc:{
                required: true,
                type: String
            },
            qwe:{
                default: 0,
                type: Number
            }
        },
        template: "#yongzheng",
        data(){
            return {
                title: "雍正",
                msg: "一壶清茶"
            }
        },
        components:{
            ql
        }
    }
    
    const kx = {
        template: "#kangxi",
        data(){
            return {
                title: "康熙",
                msg: "二环的四合院"
            }
        },
        components:{
            yz, yx
        }
    }

    new Vue({
        el:"#app",
        data:{
            title: "努尔哈赤",
            msg: "大清江山"
        },
        components:{
            kx
        }
    })

</script>
</html>